<template>
  <div class="pad-tb-7 rs__label-row-item">
    <span v-if="label" class="dis-ib rs__label-row-item-label" :style="getLabelStyle">{{label}}</span>
    <div class="rs__label-row-item-content">
      <slot></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'rsLabelItem',
  inject: ['labelRow'],
  props: {
    labelWidth: String,
    labelBold: {
      type: Boolean,
      default: null
    },
    label: String,
    align: String,
    gutter: String
  },
  computed: {
    row(){
      return this.labelRow;
    },
    getLabelStyle(){
      let labelWidth = (this.labelWidth || this.row.labelWidth);
      if(/^[0-9]+$/.test(labelWidth)){
        labelWidth += 'px';
      }
      let gutter = this.gutter || this.row.gutter;
      if(/^[0-9]+$/.test(gutter)){
        gutter += 'px';
      }
      let styles = {
        width: labelWidth,
        'text-align': this.align || this.row.align,
        'margin-right': gutter
      }
      if(this.labelBold || (this.labelBold === null && this.row.labelBold)){
        styles['font-weight'] = 'bold';
      }
      return styles;
    }
  },
  mounted(){

  }
}
</script>
<style lang="scss" scoped>
.rs__label-row-item{
  line-height: 1.25;
  /* vertical-align: middle; */
  display: flex;
  justify-items: center;
  align-items: baseline;
  .rs__label-row-item-label{
    
  }
  .rs__label-row-item-content{
    width: auto;
    flex: 1;
  }
}
</style>
